<template>
	<view>
		<nav-bar></nav-bar>
		<view class="body-content">
			<!-- 背景图 -->
			<view class="header-bg"></view>
			<view class="content-detail">
				<!-- 个人信息栏 -->
				<view class="user-content">
					<view class="user-detail">
						<image :src="userinfo.avatar"></image>
						<view class="right-area">
							<view class="user-name">Hi，{{userinfo.userName}}</view>
							<view class="user-grade">Lv{{userinfo.grade}}{{getGrade}}</view>
							<view class="user-integral">
								<view class="left-area">
									<p>{{userinfo.integral}}</p>
									<p>积分</p>
								</view>
								<view class="right-area">
									<p>{{userinfo.coupon}}</p>
									<p>优惠券</p>
								</view>
							</view>
						</view>
					</view>
					<view class="empirical-value">
						<view class="empirical-text">
							<text>当前经验值</text>
							<text>{{userinfo.integral}}</text>
							<text>/{{maximumExperience}}</text>
						</view>
						<u-line-progress activeColor="#0f559f" :percentage="percentProgressBar"
							:showText="false"></u-line-progress>
					</view>
				</view>
				<!-- 会员尊享权限 -->
				<view class="membership-rights">
					<h5>会员尊享权限</h5>
					<view
						style="display: flex;align-items: center;justify-content: space-around;margin-top: 30rpx;text-align: center;">
						<view class="jurisdiction-list" v-for="(item, index) in jurisdiction" :key="index">
							<u-icon class="icon" :name="item.icon" color="#2979ff" size="60"></u-icon>
							<p class="title">{{item.title}}</p>
							<p class="intro">{{item.intro}}</p>
						</view>
					</view>
				</view>
				<!-- 我的功能 -->
				<view class="my-function">
					<h4>我的功能</h4>
					<view class="funtion-list">
						<view class="funtion-item" v-for="(item, index) in funtionList" :key="index">
							<u-icon class="icon" :name="item.icon" color="#2979ff" size="60"></u-icon>
							<p class="title">{{item.title}}</p>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import navBar from '../../components/nav-bar/nav-bar.vue'
	export default {
		components: {
			navBar
		},
		data() {
			return {
				funtionList: [{
					icon: 'email',
					title: '意见反馈',
				}, {
					icon: 'edit-pen',
					title: '完善资料',
				}, {
					icon: 'file-text',
					title: '协议与政策',
				}, {
					icon: 'chat',
					title: '加盟咨询',
				}, {
					icon: 'server-man',
					title: '在线客服',
				}, ], // 功能列表
				jurisdiction: [{
					icon: 'gift',
					title: '堂食8.5折',
					intro: '周三会员日',
				}, {
					icon: 'car',
					title: '外卖免4元配送费',
					intro: '周三会员日',
				}, {
					icon: 'coupon',
					title: '玩转会员积分',
					intro: '周一限量好券',
				}, {
					icon: 'account',
					title: '会员专属活动',
					intro: '超多惊喜',
				}, ], // 权限
				userinfo: {
					avatar: 'https://cdn.uviewui.com/uview/album/1.jpg',
					userName: '微信用户',
					grade: 1,
					integral: 70,
					coupon: 1,
				}
			};
		},
		computed: {
			// 计算百分比进度条
			percentProgressBar() {
				let result = null
				result = Number(this.userinfo.integral) * 100 / 150
				return result
			},
			// 最大经验值
			maximumExperience() {
				let result = null
				result = 100 + (this.userinfo.grade * 50)
				return result
			},
			// 等级计算
			getGrade() {
				let result = null
				if (this.userinfo.grade == 1) {
					result = '泛泛之交'
				}
				return result
			},
		},
	}
</script>

<style lang="scss" scoped>
	.body-content {
		.header-bg {
			width: 100%;
			height: 450rpx;
			background: url(../../../static/mine-bg-1.png) no-repeat;
			background-size: 100% 100%;
		}

		.content-detail {
			transform: translateY(-120rpx);
			margin: 0 20rpx;

			.user-content {
				max-width: 100%;
				height: 100%;
				background-color: white;
				border-radius: 20rpx;
				padding: 30rpx;
				box-shadow: 0 0 6rpx 0 silver;

				.user-detail {
					display: flex;
					height: 250rpx;

					image {
						max-height: 100%;
						width: 250rpx;
						border-radius: 20rpx;
					}

					.right-area {
						margin-left: 20rpx;
						flex: 1;

						.user-name {
							font-size: 36rpx;
							font-weight: bold;
						}

						.user-grade {
							margin-top: 10rpx;
							border-radius: 50rpx;
							width: 200rpx;
							height: 50rpx;
							line-height: 50rpx;
							background-color: #0f559f;
							color: white;
							text-align: center;
							padding: 5rpx;
							font-size: 24rpx;
						}

						.user-integral {
							margin-top: 30rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							text-align: center;
							width: 100%;

							.left-area,
							.right-area {
								flex: 1;

								p:nth-child(1) {
									font-weight: bold;
									font-size: 38rpx;
								}
							}

							.left-area {
								border-right: 2rpx solid #e5e5e5;
							}
						}
					}
				}

				.empirical-value {
					margin-top: 30rpx;

					.empirical-text {
						margin-bottom: 20rpx;

						text:nth-child(1) {
							font-size: 24rpx;
						}

						text:nth-child(2) {
							margin-left: 20rpx;
						}

						text:nth-child(3) {
							font-size: 24rpx;
						}
					}
				}


			}

			.membership-rights {
				margin-top: 30rpx;

				.jurisdiction-list {
					text-align: center;

					.icon {
						text-align: center;
						display: block;
						display: flex;
						justify-content: center;
						margin-bottom: 10rpx;
						margin-top: 20rpx;
					}

					.title {
						font-size: 24rpx;
						font-weight: bold;
					}

					.intro {
						font-size: 20rpx;
						color: #a7a7a7;
					}
				}
			}

			.my-function {
				margin-top: 60rpx;

				.funtion-list {
					display: grid;
					grid-template-columns: repeat(4, 1fr);
					grid-column: 20rpx;
				}

				.funtion-item {
					text-align: center;

					.icon {
						text-align: center;
						display: block;
						display: flex;
						justify-content: center;
						margin-bottom: 10rpx;
						margin-top: 20rpx;
					}

					.title {
						font-size: 24rpx;
						font-weight: bold;
					}
				}
			}
		}

	}
</style>